<template>
  <view class="cateContainer">
      <!-- 搜索组件 S-->
      <mySearch id="mySearch" v-if="searchShow"></mySearch>
      <!-- 搜索组件 E-->
      <!-- 容器区域 S -->
      <view class="boxContainer" :style="'height:'+(wh-searchHeight)+'px'">
          <!-- 左侧 S-->
          <scroll-view class="nav" scroll-y>
              <view v-for="item in cateList" @click="changeActive(item)" :class="{ active:activeCate.id === item.id }" :key="item.id">{{item.name}}</view>
          </scroll-view>
          <!-- 左侧 E-->
          <!-- 右侧 S-->
              <view class="cate">
                  <!-- 图片 -->
                  <image class="cateImg" :src="activeCate.img_url"></u--image>
                  <!-- 滚动商品容器 S-->
                  <scroll-view @scrolltolower="loadMore" scroll-y class="listBox" :style="'height:'+(wh-searchHeight-imgHeight)+'px'">
                      <!-- 商品列表 -->
                      <goodList :list="list" v-if="list.length" :desc="false"></goodList>
                      <u-loadmore v-if="list.length" :status="status" />
                      <!-- 空的状态 -->
                      <u-empty mode="list" v-if="list.length === 0" marginTop="200rpx"></u-empty>
                  </scroll-view>
                  <!-- 滚动商品容器 E-->
              </view>
              <!-- 右侧 E-->
      </view>
      <!-- 容器区域 E -->
  </view>
  
</template>

<script>
  export default {
    data() {
      return {
        searchShow:false,
        wh:0,			// 窗口高度
        searchHeight:0,  // 搜索框的高度
        imgHeight:0,   // 分类图片高度
        cateList:[],
        activeCate:{} ,
        // 商品列表相关参数
        count:0,  	    // 总数
        currentPage:1,  // 页码
        pageSize:8, 	// 每页数量
        list:[],	// 商品列表
        status: 'loadmore'
      }
    },
    onShow() {
            // 搜索组件被创建了
            this.searchShow = true
            this.getAllCate()
        },
    onHide(){
        // 搜索组件关闭了
        this.searchShow = false
         uni.removeStorageSync('cateId')
    },
    mounted(){
        // 获取设备高度
        uni.getSystemInfo({
            success:res=>{
                this.wh = res.windowHeight
            }
        })
        // 获取搜索组件高度
        const query = uni.createSelectorQuery().in(this);
        query.select('#mySearch').boundingClientRect(data => {
            // data就是该节点的位置和高度相关信息
            this.searchHeight = data.height
        }).exec();
        // 获取图片高度
        query.select('.cateImg').boundingClientRect(data => {
            // data就是该节点的位置和高度相关信息
            this.imgHeight = data.height
        }).exec();
        
    },
    methods: {
      // 2. 定义获取全部分类方法
          async getAllCate(){
              let res =await uni.$http.get('/catalog/index')
              this.cateList = res.categoryList
              // 只有当有数据才确定激活分类信息
              if(this.cateList.length){
                  const cateId = uni.getStorageSync('cateId')
                  if(cateId){
                      let row = this.cateList.find(item=>item.id === cateId)
                      // 修改激活，重置相关内容，获取商品分类
                      this.changeActive(row)
                  }else{
                      this.activeCate = this.cateList[0]
                      // 获取商品分类
                      this.getGoodList()
                  }
              }
          },
          // 获取商品列表的方法
          async getGoodList(){
            this.status = 'loading'
              // 请求数据
              let {count, data} = await uni.$http.post('/catalog/currentlist',{
                  id:this.activeCate.id,
                  page:this.currentPage,
                  size:this.pageSize
              })
              // 赋值
              this.list = [...this.list,...data]
              this.count = count
              if(this.list.length >= this.count) {
                this.status = 'nomore'
              }else {
                this.status = 'loadmore'
              }
          },
          // 滚动到底部事件
          loadMore() {
            console.log('滚动加载更多数据')
            if (this.status !== 'loadmore') {
              return
            }
            this.currentPage++
            this.getGoodList()
          },
          changeActive(obj) {
            this.activeCate = obj
            this.list= []
            this.count = 0
            this.currentPage = 1
            this.status = 'loadmore'
            this.getGoodList()
          }
    }
  }
</script>

<style lang="scss" scoped>
.cateContainer{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	.boxContainer{
		display: flex;
		flex: 1;
		.nav{
			width: 180rpx;
			border-right: 1rpx solid #fafafa;
			height: 100%;
			view{
				line-height: 100rpx;
				text-align: center;
				color: #333;
				font-size: 30rpx
			}
			.active{
				color:#409eff;
				font-size: 32rpx
			}
		}
    .cate{
    			flex: 1;
    			padding:0 20rpx;
    			height: 100%;
    			flex-direction: column;
    			.cateImg{
    				width: 100%;
    				height: 160rpx;
    			}
    			.listBox{
    				flex:1;
    			}
    		}
    }
}
</style>
